import { useState, useRef } from 'react'
import { SafeArea, Collapse, Space, Image, ImageViewer, Tag } from 'antd-mobile'
import './index.scss'
const Details = () => {
    const imageRef = useRef(null)
    const [list] = useState([
        {
            createTime: '2024/05/01',
            remark: '这是一个备注文案1',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/02',
            remark: '这是一个备注文案2',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/03',
            remark: '这是一个备注文案3',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/04',
            remark: '这是一个备注文案4',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        },
        {
            createTime: '2024/05/05',
            remark: '这是一个备注文案5',
            imageList: [
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx',
                'https://pzdsoss.pzds.com/user/head/20231017/20231017/7hnxBx'
            ]
        }
    ])
    const [visible, setVisible] = useState(false)
    const [images, setImages] = useState([])

    const seeBigImage = (arr, i) => {
        imageRef.current?.swipeTo(i)
        setImages(arr)
        setVisible(true)
    }
    return (
        <>
            <SafeArea position="top" />
            <div className="Details">
                <Collapse>
                    {list.map((e, i) => (
                        <Collapse.Panel
                            key={i}
                            title={
                                <div className="Details_head">
                                    <Tag color="primary">消防</Tag>
                                    <Tag color="danger">不合格</Tag>
                                    <p>{e.createTime}</p>
                                </div>
                            }
                        >
                            <div>
                                <Space wrap>
                                    {e.imageList.map((ee, ii) => (
                                        <Image onClick={() => seeBigImage(e.imageList, ii)} src={ee} width={100} height={100} fit="cover" key={ii} />
                                    ))}
                                </Space>
                                <h3>{e.remark}</h3>
                            </div>
                        </Collapse.Panel>
                    ))}
                </Collapse>
            </div>
            <ImageViewer.Multi
                ref={imageRef}
                images={images}
                visible={visible}
                onClose={() => {
                    setVisible(false)
                }}
            />
            <SafeArea position="bottom" />
        </>
    )
}
export default Details
